<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="referrer" content="strict-origin-when-cross-origin">-->
    <title>TighteningApp</title>
    <script src="../js/Vue.js"></script>
    <script src="../libs/base/axios.min.js"></script>
    <script src="../libs/element/theme.js"></script>
    <script src="../libs/iview/iview.min.js"></script>
    <script src="../libs/VueLoader.js"></script>
    <script src="../libs/utils.js"></script>
    <script src="../libs/BaseApi.js"></script>
    <script src="../libs/ProductionApi.js"></script>
    <script src="../libs/UserApi.js"></script>
    <script src="../libs/RecipeApi.js"></script>
    <script src="../libs/LoggerApi.js"></script>
    <script src="../libs/SystemApi.js"></script>
    <script src="../libs/echarts.js"></script>
    <script src="../libs/PermissionApi.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../libs/iview/iview.css">
    <link rel="stylesheet" href="../libs/element/theme.css">
    <link rel="stylesheet" href="../libs/animate.min.css"/>
    <link rel="stylesheet" href="../libs/iconfont/iconfont.css">


</head>
<body>
<div class="app-index" id="app">
    <client v-if="client"></client>
    <index v-else></index>
</div>

<script type="text/javascript">
    Vue.prototype.$EventBus = new Vue({
        el: "#app",
        components: {
            'index': httpVueLoader('./server/Index.vue'),  // 这里的 'tab-component' 是组件的自定义标签名
            'client': httpVueLoader('./client/Index.vue')
        },
        data () {
            return {
                client: true
            }
        },
        method: {},
        mounted () {
            let sea = location.search;
            this.client = true;
            if (!sea.includes('client')) {
                this.client = false;
            }
        }
    });
    Vue.prototype.$echarts = echarts;

    let instance = axios.create({baseURL:'http://127.0.0.1'});
    instance.interceptors.request.use((config)=>{
        return config;
    },(error)=>{
        return Promise.reject(error);
    });

    instance.interceptors.response.use((response)=>{
        return response.data;
    },(error)=>{
        return Promise.reject(error);
    })




    Vue.prototype.$Axios = axios;
    Vue.directive('permission', {
        inserted (el, binding) {
            checkPermission(el, binding)
        },
        update (el, binding) {
            checkPermission(el, binding)
        },

    });

    /**
     * 权限校验
     * @param el
     * @param binding
     * @returns {Promise<void>}
     */
    async function checkPermission (el, binding) {
        if (!IsAuth()) {
            return;
        }
        const expression = binding.value;
        let userInfo = GetUserInfo();
        const permissionList = userInfo.permission;
        if (expression) {
            if (expression instanceof Array) {
                if (expression.length > 0) {
                    const hasPermission = permissionList.some(perm => {
                        return expression.includes(perm)
                    })
                    if (!hasPermission) {
                        el.parentNode && el.parentNode.removeChild(el)
                    }
                }
            } else {
                let index = permissionList.indexOf(expression)
                if (expression === 'main:start1') {
                }
                if (index == -1) { //无权限
                    el.parentNode && el.parentNode.removeChild(el)
                }
            }
        } else {
            throw new Error('权限内容不能为空')
        }
    }


</script>
<style>

    html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        user-select: none;
    }

    .app-index {
        background-color: #f5f7f9;
        height: 100%;
        width: 100%;

    }
</style>
</body>
</html>
